<template>
  <div>
    <el-collapse accordion>
      <template v-if="tableData.length">
        <el-collapse-item v-for="row in tableData" :name="row.id" :key="row.id"
                          :disabled="(row.contract_list || []).length == 0"
        >
          <template slot="title">
            <div class="flex justify-between align-center flex-no-wrap" style="width: 100%;">
              <div class="flex justify-start align-center flex-no-wrap">
                <div class="margin-lr-sm">
                  <BFCustomerTypeTag :name="row.customer_type_name"/>
                </div>
                <div class="margin-lr-sm">
                  <BFViewDetailBtn :showTip="customerShowTip" :id="row.id" title="项目" :name="row.customer_name"
                                   size="small"
                                   @toDetail="openCustomerDialog"
                  />
                </div>
                <div class="margin-lr-sm" style="width: 200px;" v-if="customerShowMoney">
                  <el-progress :percentage="getPercent(row.customer_finished, row.customer_total)"
                               :color="percentLimitColors"
                               :format="(percentage) => formatPercent(percentage, row.customer_finished, row.customer_total)"
                  />
                </div>
              </div>
              <div class="flex justify-end align-center flex-no-wrap">
                <div class="margin-lr-sm">
                  维护人：{{ row.customer_maintenance }}
                </div>
              </div>
            </div>
          </template>
          <div class="margin-left" v-if="(row.contract_list || []).length > 0">
            <ContractList :tableData="row.contract_list"
                          :contractShowTip="contractShowTip"
                          :contractShowMoney="contractShowMoney"
                          :saleOrderShowExpand="saleOrderShowExpand"
                          :saleOrderShowTip="saleOrderShowTip"
                          :saleOrderShowMoney="saleOrderShowMoney"
                          :marketOrderShowExpand="marketOrderShowExpand"
                          :marketOrderShowTip="marketOrderShowTip"
                          :adMakeOrderShowExpand="adMakeOrderShowExpand"
                          :adMakeOrderShowTip="adMakeOrderShowTip"
                          :workOrderShowExpand="workOrderShowExpand"
                          @openContractDialog="openContractDialog"
                          @openSaleOrderDialog="openSaleOrderDialog"
                          @openMarketOrderDialog="openMarketOrderDialog"
                          @openInvoiceDialog="openInvoiceDialog"
                          @openReceivedDialog="openReceivedDialog"
                          @openADMakeOrderDialog="openADMakeOrderDialog"
            />
          </div>
        </el-collapse-item>
      </template>
      <template v-else>
        <el-collapse-item title='暂无数据' disabled></el-collapse-item>
      </template>
    </el-collapse>
  </div>
</template>

<script>
import ContractList from './ContractList'
import BFCustomerTypeTag from './BFCustomerTypeTag'
import BFViewDetailBtn from './BFViewDetailBtn'
import { getPercentage, percentLimitColors } from '@/utils/util.js'

export default {
  name: 'BussinessFlowComponentCustomerList',
  components: {
    ContractList,
    BFCustomerTypeTag,
    BFViewDetailBtn
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    customerShowTip: {
      type: Boolean,
      default: false
    },
    customerShowMoney: {
      type: Boolean,
      default: false
    },
    contractShowTip: {
      type: Boolean,
      default: false
    },
    contractShowMoney: {
      type: Boolean,
      default: false
    },
    saleOrderShowExpand: {
      type: Boolean,
      default: false
    },
    saleOrderShowTip: {
      type: Boolean,
      default: false
    },
    saleOrderShowMoney: {
      type: Boolean,
      default: false
    },
    marketOrderShowExpand: {
      type: Boolean,
      default: false
    },
    marketOrderShowTip: {
      type: Boolean,
      default: false
    },
    adMakeOrderShowExpand: {
      type: Boolean,
      default: false
    },
    adMakeOrderShowTip: {
      type: Boolean,
      default: false
    },
    workOrderShowExpand: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      percentLimitColors
    }
  },
  watch: {},
  mounted() {
  },
  methods: {
    openCustomerDialog(id) {
      this.$emit('openCustomerDialog', id)
    },
    openContractDialog(id) {
      this.$emit('openContractDialog', id)
    },
    openSaleOrderDialog(id) {
      this.$emit('openSaleOrderDialog', id)
    },
    openMarketOrderDialog(id) {
      this.$emit('openMarketOrderDialog', id)
    },
    openADMakeOrderDialog(id) {
      this.$emit('openADMakeOrderDialog', id)
    },
    openInvoiceDialog(id) {
      this.$emit('openInvoiceDialog', id)
    },
    openReceivedDialog(ids) {
      this.$emit('openReceivedDialog', ids)
    },
    getPercent(finished, total) {
      return getPercentage(finished, total)
    },
    formatPercent(percentage, finished, total) {
      return '￥' + finished + ' / ￥' + total + ' (' + this.getPercent(finished, total) + '%)'
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-collapse .el-collapse-item.is-disabled .el-collapse-item__header {
     color: #303133;
  }
</style>
